<!doctype html>
<html lang="en" ng-app>
  <head>
    <title>Chat Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
    <style>
      body {
        padding-top: 60px;
      }
    </style>
    <script>
      function ChatController($scope) {
        var socket = io.connect();

        $scope.messages = [];
        $scope.roster = [];
        $scope.name = '';
        $scope.text = '';

        socket.on('connect', function () {
          $scope.setName();
        });

        socket.on('message', function (msg) {
          $scope.messages.push(msg);
          $scope.$apply();
        });

        socket.on('roster', function (names) {
          $scope.roster = names;
          $scope.$apply();
        });

        $scope.send = function send() {
          console.log('Sending message:', $scope.text);
          socket.emit('message', $scope.text);
          $scope.text = '';
        };

        $scope.setName = function setName() {
          socket.emit('identify', $scope.name);
        };
      }
    </script>
  </head>
  <body>
    <div class="container" ng-controller="ChatController">
      <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
          <div class="pull-right">
            <a href="https://c9.io" class="brand">Cloud9 IDE</a>
          </div>
        </div>
      </div>
      <div class="page-header">
        <h1>Chat Example</h1>
      </div>
      <div class="row">
        <div class="span3">
          <ul class="nav nav-list well">
            <li class="nav-header">Local Users</li>
            <li ng-repeat="user in roster" ng-bind="user">
            </li>
          </ul>
        </div>
        <div class="span9">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th class="span2">Name</th>
                <th class="span7">Text</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="msg in messages">
                <td class="span2" ng-bind="msg.name"></td>
                <td class="span7" ng-bind="msg.text"></td>
              </tr>
            </tbody>
          </table>
          <div class="row controls">
            <form ng-submit="send()">
              <div class="span2"><input type="text" class="input-block-level" ng-model="name" ng-change="setName()" placeholder="Your Name"></div>
              <div class="input-append span7">
                <input type="text" class="span6" ng-model="text" placeholder="Message">
                <input type="submit" class="span1 btn btn-primary" value="Send" ng-disabled="!text">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/angular.min.js"></script>
  </body>
</html>
